@import "_settings"
$mobile-bar-height = 40px
$vs-banner-height-desktop = 80px
$vs-banner-height-mobile = 50px
$menu-height = 63px

body.has-vs-banner

  #v3-banner
    margin-top: $vs-banner-height-mobile
    @media (min-width: 680px)
      margin-top: $vs-banner-height-desktop
    @media (min-width: 900px)
      margin-top: 0

  #mobile-bar
    top: $vs-banner-height-mobile
    @media (min-width: 680px)
      top: $vs-banner-height-desktop

  .sidebar
    top: $vs-banner-height-mobile + $mobile-bar-height
    @media (min-width: 680px)
      top: $vs-banner-height-desktop + $mobile-bar-height
    @media (min-width: 900px)
      top: $vs-banner-height-desktop + $menu-height

  .content
    padding-top: 85px
    @media (min-width: 680px)
      padding-top: 125px
    @media (min-width: 900px)
      padding-top: 35px

  &.docs
    @media (min-width: 900px)
      padding-top: 144px

    #vs
      position: fixed

    #header
      top: $vs-banner-height-mobile
      @media (min-width: 680px)
        top: $vs-banner-height-desktop

    #sidebar-sponsors-platinum-right
      @media (min-width: 900px)
        top: 160px

#vs
  font-family "Roboto", sans-serif
  z-index: 8
  box-sizing: border-box
  color: #FFF
  background: #202A5A
  display: flex
  align-items: center
  position: fixed
  left: 0
  right: 0
  padding: 0 10px
  min-height: $vs-banner-height-mobile
  top: 0
  @media (min-width: 680px)
    justify-content: center
    min-height: $vs-banner-height-desktop
  @media (min-width: 900px)
    position: static

  &.vs-hidden
    display: none

  &:hover
    .vs-core
      .vs-button
        background: #f22606

  .vs-iso
      display: none
      position: absolute
      left: 20px
      height: 26px
      img
        height: 26px
      @media (min-width: 680px)
        display: inline-block
        height: 40px
        img
          height: 40px
      @media (min-width: 900px)
        display: none

  .vs-logo
    position: absolute
    display: none
    left: 40px
    @media (min-width: 900px)
      display: block

  .vs-core
    display: flex
    align-items: center

    .vs-backpack
      margin-right: 14px
      img
        height: 50px
        @media (min-width: 680px)
          height: 74px

    .vs-slogan
      color: #FFF
      font-weight: bold
      font-size: 14px
      width: 150px
      text-align: center
      margin-left: 40px
      @media (min-width: 400px)
        margin-left: 60px
      @media (min-width: 680px)
        margin-left: 0
        width: auto
        text-align: left
        font-size: 18px
      > .vs-slogan-light
        color: #ff5338
        text-align: left
        @media (min-width: 900px)
          text-align: center
          display: inline

    .vs-button
      margin-left: 43px
      color: #FFF
      padding: 13px 24px
      border-radius: 40px
      display: none
      background: #ff5338
      font-weight: bold
      @media (min-width: 680px)
        display: inline-block

  .vs-close
      right: 10px
      position: absolute
      padding: 10px
      @media (min-width: 680px)
        right: 20px
      &:hover
        color: #56D8FF